import Vue from 'vue'
import App from './App.vue'

/*
VueRouter 的介绍
目标: 认识插件 VueRouter，掌握VueRouter 的基本使用步骤
作用: 修改地址栏路径时，切换显示匹配的组件
说明: Vue官方的一个路由插件，是一个第三方包
官网: https://v3.router.vuejs.org/zh/
VueRouter 的 使用(5 + 2)
5个基础步骤(固定)
 1. 下载 VueRouter 模块到当前工程，版本3.6.5
    (Vue2 VueRouter3.x Vuex3.x)
    (Vue3 VueRouter4.x Vuex4.x)
      yarn add vue-router@3.6.5
 2. 引入
      import VueRouter form 'vue-router'
 3. 安装注册
      Vue.use(VueRouter)
 4. 创建路由对象
      const router = new VueRouter()
 5. 注入，将路由对象注入到new Vue实例中，建立关联
      new Vue({
        render: h => h(App),
        router
      }).$mount('#app')

2个核心步骤
 1. 创建组件(views目录)，配置路由规则
    routers
 2. 准备导航链接，配置路由出口(匹配的组件展示的位置) 
    a router-view
*/

import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'

import VueRouter from 'vue-router'

Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')
